<template>
  <div class="animated fadeIn">
    <!-- 运输中 2018/3/5 11:14  -->
    <Row>
      <i-col :md="24">

        <div>
          <!--
          <div id="container" style="margin-bottom:10px;">

              <Button type="primary" size="large" icon="ios-cloud-upload-outline" id='pickfiles' @click="qiniu_upload" style="padding-bottom:5px;">上传文件</Button>
              <Progress :percent="progresscount" :status="progresstatus" style="width=90%;vertical-align:middle" v-if="progresshow">
                  <Icon type="checkmark-circled" v-if="progresscount==100"></Icon>
                  <span v-if="progresscount===100">上传成功</span>
                  <Icon type="close-circled" v-if="progresstatus==='wrong'"></Icon>
                  <span v-if="progresstatus==='wrong'">上传失败</span>
                  <span style="position:absolute;left:50%;top:-5px;" v-if="progresscount!==0&&progresscount!=100">{{progressspeed}}</span>
              </Progress>
          </div>
        -->

          <div style="position:relative;">

            <Table :columns="columns7" :data="main_order_list" ref="table"></Table>

            <div style="position:absolute;top:0px;width:100%;height:100%;display: flex;
                                      align-items: center;
                                      justify-content: center;background: rgba(210, 216, 222, 0.5);" v-if="list_loadding">
              <Spin size="large"></Spin>
              <h6 style="color:#2d8cf0;margin-top:10px;">正在获取数据...</h6>
            </div>
          </div>

          <Page :total="this.pageTotal" show-total @on-change="setInitPage" style="text-align:right;margin-top:50px"></Page>
          <!--
          <Button type="primary" size="large" @click="exportData(1)">
              <Icon type="ios-download-outline"></Icon> 导出原始数据</Button>
          <Button type="primary" size="large" @click="exportData(2)">
              <Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</Button>
          -->
        </div>


      </i-col>
      <i-col :md="12">
      </i-col>
    </Row>
    <Modal v-model="detailModel" title="运单详情" width="1100" height="500">
      <Tabs :animated="false">
        <TabPane label="运单详情">
          <Table :columns="column1" :data="detailData"></Table>
        </TabPane>
        <TabPane label="轨迹跟踪">
          <!--
          <p>当前位置信息：{{positionList[positionList.length - 1].info}}</p>
        -->
          <Steps :current="0" direction="vertical">
            <template v-for="item in positionList">
              <Step :title="item.info" :content="item.time"></Step>
            </template>
          </Steps>
        </TabPane>
        <TabPane label="通知记录">
          <Table :columns="column2" :data="noticeData"></Table>
        </TabPane>
      </Tabs>

    </Modal>
    <Modal v-model="assignmentModal" title="派单" @on-ok="submitSendOrder">
      <Form :model="assignForm" :label-width="150" ref="assignForm">
        <FormItem label="实际对位时间" prop="paraPositionTime">
          <DatePicker type="datetime" placeholder="实际对位时间" v-model="assignForm.paraPositionTime"></DatePicker>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="sendNoticeModal" title="发送通知" @on-ok="submitSendNotice">
      <Form :model="sendNoticeForm" :label-width="150" ref="sendNoticeForm">
        <FormItem label="对位股道" prop="paraPositionTrack">
          <Select v-model="sendNoticeForm.paraPositionTrack">
            <Option v-for="item in trackOptions" :value="item" :key="item">
              {{item}}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="预计到达时间" prop="estimateArriveTime">
          <DatePicker type="datetime" placeholder="选择需求时间" v-model="sendNoticeForm.estimateArriveTime"></DatePicker>
        </FormItem>
        <template v-for="(item, index) in trackName">
          <FormItem :label="item.login_name">
            <Select v-model="sendNoticeForm.data[index].address" filterable multiple :value="sendNoticeForm.data[index].address">
              <Option v-for="(item, index) in address" :value="item" :key="index">{{item}}</Option>
            </Select>
          </FormItem>
        </template>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import { getMainOrder, getOrderDetail, getNoticeListByMainOrderNo } from '@api/backEnd/mainOrder'
  // import Cookies from 'js-cookie'
  import { assignmentOrder, getTrackList, getOwnFleet, getAddressList, sendNotice } from '@api/backEnd/station'
  // import { parseTime } from 'utils'
  import moment from 'moment'
  //  import fetch from 'utils/fetch'
  //  import axios from 'axios'
  import { mapGetters } from 'vuex'

  export default {
    name: 'transportation',
    data () {
      return {
        positionList: [],
        assignmentModal: false,
        sendNoticeModal: false,
        detailModel: false,
        progresshow: false,
        progresscount: 0,
        progresstatus: 'active',
        progressspeed: 0,
        video_list: [],
        pageindex: 1,
        pageTotal: null,
        main_order_list: [],
        detailData: [],
        noticeData: [],
        trackOptions: [],
        trackName: [],
        address: [],
        lodding: false,
        list_loadding: false,
        assignForm: {
          mainOrderNo: '',
          paraPositionTime: ''
        },
        sendNoticeForm: {
          paraPositionTrack: '',
          estimateArriveTime: '',
          mainOrderNo: '',
          data: []
        },
        newObj: [],
        postArr: [],
        columns7: [
          {
            title: '联运单号',
            key: 'orderNo',
            ellipsis: 'false',
            fixed: 'left',
            width: 200,
            render: (h, params) => {
              let thisdata = params.row.orderNo
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '空车入线时间',
            ellipsis: 'false',
            key: 'emptyTime',
            width: 150,
            render: (h, params) => {
              let thisdata = params.row.emptyTime
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '起始站',
            ellipsis: 'false',
            key: 'startStationName',
            width: 100,
            render: (h, params) => {
              let thisdata = params.row.startStationName
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '起始站出发时间',
            ellipsis: 'false',
            key: 'startStationTime',
            width: 150,
            render: (h, params) => {
              let thisdata = params.row.startStationTime
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '终点站',
            ellipsis: 'false',
            key: 'endStationName',
            width: 100,
            render: (h, params) => {
              let thisdata = params.row.endStationName
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '到达终点站时间',
            ellipsis: 'false',
            key: 'endStationTime',
            width: 150,
            render: (h, params) => {
              let thisdata = params.row.endStationTime
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '托运人',
            ellipsis: 'false',
            key: 'shipper',
            width: 150,
            render: (h, params) => {
              let thisdata = params.row.shipper
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '收货人',
            ellipsis: 'false',
            key: 'receiver',
            width: 200,
            render: (h, params) => {
              let thisdata = params.row.receiver
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '创建时间',
            key: 'createTime',
            width: 200,
            sortable: true,
            sortType: 'desc',
            render: (h, params) => {
              let thisdata = params.row.createTime
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '操作',
            key: 'action',
            align: 'center',
            ellipsis: 'true',
            width: 200,
            render: (h, params) => {
              const roles = this.currentUser.role
              if (roles.indexOf('矿企') > -1 || roles.indexOf('电厂') > -1) {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    on: {
                      click: (value, row) => {
                        this.detailModel = true
                        getOrderDetail(params.row).then(res => {
                          if (res.data.isSuccess === 1) {
                            this.detailData = res.data.data.sub
                            this.positionList = res.data.data.position.reverse()
                            console.log(this.positonList)
                            console.log(params.row.orderNo)
                            console.log(this.detailData + ' --- sub detail ')
                          }
                        })
                      }
                    }
                  }, '查看详情')
                ])
              } else if (roles.indexOf('到站') > -1) {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: (value, row) => {
                        this.sendNoticeModal = true
                        this.sendNoticeForm.mainOrderNo = params.row.orderNo
                        getTrackList().then(res => {
                          if (res.data.isSuccess === 1) {
                            this.trackOptions = res.data.data
                          }
                        })
                        getOwnFleet().then(res => {
                          if (res.data.isSuccess === 1) {
                            this.trackName = res.data.data
                            this.newObj = this.trackName
                            for (let i = 0; i < this.newObj.length; i++) {
                              this.sendNoticeForm.data.push({
                                truckName: this.newObj[i].login_name,
                                address: []
                              })
                            }
                          }
                        })
                        getAddressList().then(res => {
                          if (res.data.isSuccess === 1) {
                            this.address = res.data.data
                          }
                        })
                      }
                    }
                  }, '发送通知'),
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    on: {
                      click: (value, row) => {
                        this.assignmentModal = true
                        this.assignForm.mainOrderNo = params.row.orderNo
                      }
                    }
                  }, '派单'),
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    on: {
                      click: (value, row) => {
                        this.detailModel = true
                        getOrderDetail(params.row).then(res => {
                          if (res.data.isSuccess === 1) {
                            this.detailData = res.data.data.sub
                            this.positionList = res.data.data.position.reverse()
                            console.log(this.positonList)
                            console.log(row)
                            console.log(params.row.orderNo)
                            console.log(this.detailData + ' --- sub detail ')
                          }
                        })
                        getNoticeListByMainOrderNo(params.row).then(res => {
                          if (res.data.isSuccess === 1) {
                            this.noticeData = res.data.data
                          }
                        })
                      }
                    }
                  }, '查看详情')
                ])
              }
            }
          }
        ],
        column1: [
          {
            title: '子运单单号',
            ellipsis: 'false',
            key: 'orderNo',
            render: (h, params) => {
              let thisdata = params.row.orderNo
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '车队',
            ellipsis: 'false',
            key: 'fleetName',
            render: (h, params) => {
              let thisdata = params.row.fleetName
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '司机',
            ellipsis: 'false',
            key: 'driverName',
            render: (h, params) => {
              let thisdata = params.row.driverName
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '车牌号',
            ellipsis: 'false',
            key: 'truckPlate',
            render: (h, params) => {
              let thisdata = params.row.truckPlate
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '磅单编号',
            ellipsis: 'false',
            key: 'poundNo',
            render: (h, params) => {
              let thisdata = params.row.poundNo
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '绑定时间',
            ellipsis: 'false',
            key: 'bindTime',
            render: (h, params) => {
              let thisdata = params.row.bindTime
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '毛重',
            ellipsis: 'false',
            key: 'grossWeight',
            render: (h, params) => {
              let thisdata = params.row.grossWeight
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '毛重',
            ellipsis: 'false',
            key: 'grossWeight',
            render: (h, params) => {
              let thisdata = params.row.grossWeight
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '毛重时间',
            ellipsis: 'false',
            key: 'grossWeightTime',
            render: (h, params) => {
              let thisdata = params.row.grossWeightTime
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '皮重',
            ellipsis: 'false',
            key: 'tareWeight',
            render: (h, params) => {
              let thisdata = params.row.tareWeight
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '净重',
            ellipsis: 'false',
            key: 'netWeight',
            render: (h, params) => {
              let thisdata = params.row.netWeight
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '皮重时间',
            ellipsis: 'false',
            key: 'tareWeightTime',
            render: (h, params) => {
              let thisdata = params.row.tareWeightTime
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }
        ],
        column2: [
          {
            title: '车队名称',
            ellipsis: 'false',
            key: 'fleetName',
            render: (h, params) => {
              let thisdata = params.row.fleetName
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '送货地址',
            ellipsis: 'false',
            key: 'addresses',
            render: (h, params) => {
              let thisdata = params.row.addresses
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }
        ]
      }
    },
    methods: {
      submitSendNotice () {
        let val = this.sendNoticeForm.data
        for (let item in val) {
          if (+val[item].address.length !== 0) {
            this.postArr.push({
              address: val[item].address,
              truckName: val[item].truckName
            })
          }
        }
        this.sendNoticeForm.estimateArriveTime = moment(this.sendNoticeForm.estimateArriveTime).format('YYYY-MM-DD HH:mm:ss')
        const paraPositionTrack = this.sendNoticeForm.paraPositionTrack
        const mainOrderNo = this.sendNoticeForm.mainOrderNo
        const estimateArriveTime = this.sendNoticeForm.estimateArriveTime
        const data = JSON.stringify(this.postArr)
        const param = { paraPositionTrack, mainOrderNo, estimateArriveTime, data }
        sendNotice(param).then(res => {
          console.log(res.data)
          if (res.data.isSuccess === 1) {
            console.log(res.data.data + '发送通知')
            this.$Message.info('发送成功')
          } else {
            console.log(res.data)
          }
        })
      },
      remove (index) {
        this.video_list.splice(index, 1)
      },
      submitSendOrder () {
        const mainOrderNo = this.assignForm.mainOrderNo
        const paraPositionTime = moment(this.assignForm.paraPositionTime).format('YYYY-MM-DD H:mm:ss')
        const param = { mainOrderNo, paraPositionTime }
        assignmentOrder(param).then(res => {
          console.log(res.data)
          if (res.data.isSuccess === 1) {
            this.$Message.info('派单成功')
          }
        })
      },
      //      qiniu_upload () {
      //        uploader.start();
      //      },
      setInitPage (page) {
        const status = 4
        const param = { status, page }
        getMainOrder(param).then(res => {
          if (res.data.isSuccess === 1) {
            let mainOrderList = res.data.data.list
            mainOrderList.sort(function (p1, p2) {
              return new Date(p1.createTime).getTime() - new Date(p2.createTime).getTime()
            })
            this.main_order_list = mainOrderList.reverse()
            this.pageTotal = res.data.data.total
          } else {
            this.pageTotal = 0
          }
        })
        this.pageindex = page
      },
      exportData (type) {
        if (type === 1) {
          this.$refs.table.exportCsv({
            filename: '原始数据',
            columns: this.columns7,
            data: this.video_list
          })
        } else if (type === 2) {
          this.$refs.table.exportCsv({
            filename: '排序和过滤后的数据',
            original: false
          })
        }
      }
    },
    computed: {
      ...mapGetters(['currentUser'])
    },
    mounted () {
      const vue = this
      this.list_loadding = true
      setTimeout(function () {
        vue.list_loadding = false
      }, 2000)
      this.setInitPage(1)
    }
  }
</script>
